import { useState } from "react";

const S = (props) => {
  console.log(`执行 useState 后，${props.name} 重新渲染了`)
  const [s, setS] = useState(false);
  const click = () => {
    setS(!s)
  };
  return (
    <div>
      <button onClick={click}>{s?"隐藏":"显示"}</button>
      {s ? <div>Hello World</div> : null}
    </div>
  );
};


function App() {
  const [s, setS] = useState(false);
  const click = () => {
    setS(!s)
  };
  return (
    <div className="App">
      <h1>useState基础使用</h1>
      <S name="A"></S>
      <S name="B"></S>
    </div>
  );
}

export default App;

